<template>
  <u-popup mode="bottom" :value="show" border-radius="16" @close="onClose">
    <view class="login-popup">
      <view class="login-header">
        <view class="login-title">微信授权登录</view>
        <view class="login-desc">请授权登录后使用知识库提问功能</view>
      </view>
      
      <button class="wechat-login-btn" open-type="getUserInfo" @getuserinfo="onGetUserInfo">
        <u-icon name="weixin-fill" size="40" color="#fff" class="wechat-icon"></u-icon>
        <text class="login-btn-text">微信授权登录</text>
      </button>
      
      <view class="cancel-btn" @click="onCancel">取消</view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'WechatLoginPopup',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    show(newVal) {
      console.log('WechatLoginPopup show changed:', newVal)
    }
  },
  mounted() {
    console.log('WechatLoginPopup mounted:', this.show)
  },
  methods: {
    onGetUserInfo(e) {
      // 用户同意授权
      if (e.detail.userInfo) {
        this.$emit('login', e.detail.userInfo)
      } else {
        uni.showToast({
          title: '授权失败',
          icon: 'none'
        })
      }
    },
    onCancel() {
      this.$emit('cancel')
      this.$emit('update:show', false)
    },
    onClose() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.login-popup {
  padding: 50rpx 40rpx;
  
  .login-header {
    margin-bottom: 60rpx;
    
    .login-title {
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      margin-bottom: 24rpx;
      color: #333;
    }
    
    .login-desc {
      font-size: 28rpx;
      color: #999;
      text-align: center;
    }
  }
  
  .wechat-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #07C160;
    color: #ffffff;
    height: 96rpx;
    border-radius: 48rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 6rpx 16rpx rgba(7, 193, 96, 0.2);
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(7, 193, 96, 0.2);
    }
    
    .wechat-icon {
      margin-right: 16rpx;
    }
    
    .login-btn-text {
      font-size: 32rpx;
      font-weight: 500;
    }
  }
  
  .cancel-btn {
    text-align: center;
    color: #999;
    font-size: 30rpx;
    padding: 20rpx 0;
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60rpx;
      height: 2rpx;
      background-color: #eee;
    }
    
    &:active {
      opacity: 0.7;
    }
  }
}
</style> 